<template>
  <div id="tableView">
    <el-row>
      <el-col :span="12">
        <el-row class="tab-head">
          <img src="@/assets/images/Ultravioletight.png"
            style="width: 50px;height: 50px; display: flex; margin: 10px auto;">
          <el-row
            style="height: 20%;display: flex; align-self: center; justify-content: center;justify-content: center;">紫外线指数<span
              style="height: 50%;display: flex;">
              :PM2.5
            </span></el-row>

        </el-row>

      </el-col>
      <el-col :span="12">
        <el-row class="tab-head">
          <img src="@/assets/images/humidness.png" style="width: 50px;height: 50px; display: flex; margin: 10px auto;">
          <el-row
            style="height: 20%;display: flex; align-self: center; justify-content: center;justify-content: center;">湿度
            <span style="height: 50px; display: flex;">
              :50%
            </span>
          </el-row>

        </el-row>

      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-row class="tab-head">
          <img src="@/assets/images/temperature.png"
            style="width: 50px;height: 50px; display: flex; margin: 10px auto;">
          <el-row
            style="height: 20%;display: flex; align-self: center; justify-content: center;justify-content: center;">体感温度
            <span style="height: 50%;display: flex;">
              :3°
            </span>
          </el-row>

        </el-row>

      </el-col>
      <el-col :span="12">
        <el-row class="tab-head">
          <img src="@/assets/images/wind.png" style="width: 50px;height: 50px; display: flex; margin: 10px auto;">
          <el-row
            style="height: 20%;display: flex; align-self: center; justify-content: center;justify-content: center;">北风
            <span>
              : 3级别
            </span>
          </el-row>

        </el-row>

      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: 'tableView'
}
</script>
<style scoped>
#tableView {
  width: 300px;
  height: 300px;
  background-color: rgba(25, 1, 1, 0.5);
  z-index: 999;
  position: absolute;
  top: 30%;
  left: 12%;
  transform: translate(-50%, -50%);
  border-radius: 10px;

  .el-row {
    height: 50%;
    color: #fff;

  }

  .tab-head {
    height: 70%;
    color: #fff;
  }

  .tab-bot {
    height: 30%;
    color: #fff;
  }

  .el-col {
    border: 0.5px solid #fed610;
    height: 100%;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
